<template>
    <div class="costmonthly">
        <button v-on:click="getData">count++</button>
        <p>{{data1}}</p>
        
    </div>
</template>
<script>
    export default {
        data() {
            return {
                data1: ''
            }
        },
        methods: {
            getCount: function() {
                this.$store.commit('increment')
            },
            getData: function() {
                var _this = this
                    // this.$http.options.emulateJSON = true;
                    // this.$http({
                    //     url: 'http://192.168.140.25:5000',
                    //     method: 'POST',
                    //     withCredientials: true,
                    //     emulateJSON: true,
                    //     headers: {
                    //         'Content-Type': 'application/vnd.google-earth.kml+xml; charset=utf-8'
                    //     }

                // }).then(function(response) {
                //     var str = unescape(response.body)
                //     this.data = str[0].length
                // }, function(res) {
                //     alert(res)
                // });
                $.ajax({
                    type: 'post',
                    url: 'http://192.168.140.25:5000',
                    dataType: 'json',
                    crossDomain: true,
                    error: function(request) {
                        alert('连接错误');
                    },
                    success: function(retdata) {
                        this.data1 = retdata[4].Active
                        alert(this)
                    }
                });
            }
        }
    }
</script>
<style>
    .costmonthly {
        width: 100px;
        height: 100px;
        background-color: green;
        position: fixed;
        top: 200px;
        left: 300px;
    }
</style>